<template>
	<view class="wrap">
		<view class="header">
			<image src="../../static/bg.png" class="bg" mode=""></image>
			<view class="header-top">
				<text>Hi, 欢迎使用安恒理财</text>
				<view class="service-box" @click="bindService">
					<image src="../../static/service.png" mode=""></image>
				</view>
			</view>
			<view class="header-content" @click="bindPosition">
				<image src="../../static/new-index.png" class="newIndex" mode=""></image>

				<view class="top">
					<text style="color: #9EA0A8;">持仓金额</text>
					<view class="">
						<text style="color: #9EA0A8;">详情</text>
						<image src="/static/icon-more.png" mode=""></image>
					</view>
				</view>
				<view class="price">
					<text class="amount">{{userData?userData.investAmount:'0'}}</text>
					<text class="unit">USDT</text>
					<image src="../../static/top.png" mode=""></image>
				</view>
				<view class="summary">
					<view class="">

						<text class="label">昨日收益</text>
						<text class="value">{{userData? userData.yesterdayAmount+' U':'0'}}</text>
					</view>
					<view class="">

						<text class="label">累积收益</text>
						<text class="value">{{userData? userData.totalAmount+' U':'0'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view class="tab" @click="bindTeam">
				<image src="../../static/team.png" mode=""></image>
				<text>团队</text>
			</view>
			<view class="tab" @click="bindRecharge">
				<image src="../../static/recharge.png" mode=""></image>
				<text>充值</text>
			</view>
		</view>
		<view class="nitoce" v-if="notice" @click="bindPlatformNews">
			<view class="">
				<image src="/static/zx.png" mode=""></image>
				<text>资讯</text>
			</view>
			<!-- <text class="slh">{{notice.content}}</text> -->
			<view class="bottom">
				<uni-notice-bar scrollable single speed="50" :text="notice.content" background-color="#F6F7F9"
					color="#313646"></uni-notice-bar>
			</view>

		</view>
		<view class="title">
			<text>智能选品</text>
		</view>
		<view class="produce-list">
			<view class="produce" v-for="(item,index) in productData" :key="index">
				<image src="../../static/card_productslist.png" class="product-bg" mode=""></image>
				<view class="pc">
					<view class="product-header">
						<image :src="item.cover" mode=""></image>
						<text class="product-title">{{item.name}} {{ item.lockDays}}天</text>
					</view>
					<view class="right">

						<text class="note">每日返息，到期还本</text>

						<view class="tips" style="margin-top: 0;">
							<text>稳健理财 | 低风险</text>

						</view>
					</view>
					<view class="footer">
						<view class="fitem" v-for="(item,index) in item.limitMoney" :key="index">

							<view class="f1">
								<text class="f-t">第{{index+1}}期</text>
								<text class="status act" v-if="item.status=='hot_selling'">热销中</text>
								<text class="status" v-if="item.status=='not_open'">未开放</text>
								<text class="status" v-if="item.status=='sold_out'">已售罄</text>
							</view>
							<view class="tips">
								<text>限量{{item.sumLimitMoney}}U</text>
								<text class="line"></text>
								<text>剩余{{item.inventoryMoney}}U</text>
							</view>
							<view class="f2">
								<view class="f3">
									<view class="price">
										<text class="amount">{{(item.interest * 100).toFixed(2)}}</text>

										<text class="unit">%</text>
									</view>
									<text class="day">日利率</text>
								</view>
								<button plain @click="bindProductInfo(item)" v-if="item.status=='hot_selling'">立即购买</button>
							</view>

						</view>

					</view>

				</view>



			</view>

		</view>
		<view class="title" @click="bindMember">
			<text>热销产品</text>
			<view style="display: flex; color: #9EA0A8; font-size: 23rpx; flex-direction: row; align-items: center;">更多
				<image src="../../static/icon-more.png" mode=""></image>
			</view>
		</view>
		<view class="hot-product-list">
			<view class="produce" v-for="(item,index) in hotProductData" :key="index">
				<image src="../../static/card_productslist.png" class="product-bg" mode=""></image>
				<view class="pc">
					<view class="product-header">
						<image :src="item.cover" mode=""></image>
						<text class="product-title">{{item.name}} {{ item.lockDays}}天</text>
					</view>
					<view class="right">

						<text class="note">每日返息，到期还本</text>

						<view class="tips" style="margin-top: 0;">
							<text>稳健理财 | 低风险</text>

						</view>
					</view>
					<view class="footer">
						<view class="fitem" v-for="(item,index) in item.limitMoney" :key="index">

							<view class="f1">
								<text class="f-t">第{{index+1}}期</text>
								<text class="status act" v-if="item.status=='hot_selling'">热销中</text>
								<text class="status" v-if="item.status=='not_open'">未开放</text>
								<text class="status" v-if="item.status=='sold_out'">已售罄</text>
							</view>
							<view class="tips">
								<text>限量{{item.sumLimitMoney}}U</text>
								<text class="line"></text>
								<text>剩余{{item.inventoryMoney}}U</text>
							</view>
							<view class="f2">
								<view class="f3">
									<view class="price">
										<text class="amount">{{(item.interest * 100).toFixed(2)}}</text>

										<text class="unit">%</text>
									</view>
									<text class="day">日利率</text>
								</view>
								<button plain @click="bindProductInfo(item)" v-if="item.status=='hot_selling'">立即购买</button>
							</view>

						</view>

					</view>

				</view>



			</view>
		</view>
		<uni-tabBar current="1"></uni-tabBar>
		<!-- 吸顶 -->
		<!-- <view :class="{'fixed-header':isFixed}">
			
		</view> -->
	</view>

</template>

<script setup>
	import {
		productHome,
		user,
		noticeGetLast
	} from '@/util/api.js'
	import {
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	const productData = ref()
	const hotProductData = ref()
	const userData = ref()
	const notice = ref()
	const isFixed = ref(false)
	onShow(() => {
		uni.hideTabBar({
			animation: false
		})
		getHomeProduct()
		getUser()
		getNotice()
	})
	onPageScroll((e) => {

		if (e.scrollTop > 50) {
			isFixed.value = true
		} else {
			isFixed.value = false
		}
		console.log(isFixed.value)
	})
	// 首页投资产品
	const getHomeProduct = async () => {
		const result = await productHome()
		console.log(result)
		result.data.newProduct.map(item => {

		})
		productData.value = result.data.newProduct
		hotProductData.value = result.data.otherProduct
	}
	// 产品列表
	const bindMember = () => {
		uni.switchTab({
			url: "/pages/member/member"
		})
	}
	// 获取公告
	const getNotice = async () => {
		const result = await noticeGetLast()
		notice.value = result.data
	}
	// 联系客服
	const bindService = () => {
		uni.navigateTo({
			url: "/pages/webViewService/webViewService"
		})
	}
	// 获取当前登录用户信息
	const getUser = async () => {
		const result = await user()
		console.log(result)
		if (result.code == 200) {
			userData.value = result.data
		} else {
			userData.value = null
		}
	}
	// 产品详情
	const bindProductInfo = (item) => {

		uni.navigateTo({
			url: "/pages/productInfo/productInfo?id=" + item.id + '&pid=' + item.productId
		})
	}
	// 持仓详情
	const bindPosition = () => {
		if (userData.value) {
			uni.navigateTo({
				url: "/pages/position/position"
			})
		} else {
			uni.showModal({
				title: "提示",
				content: "需要登录",
				success: (ret) => {
					if (ret.confirm) {
						uni.navigateTo({
							url: "/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 团队
	const bindTeam = () => {
		if (userData.value) {
			uni.navigateTo({
				url: "/pages/team/team"
			})
		} else {
			uni.showModal({
				title: "提示",
				content: "需要登录",
				success: (ret) => {
					if (ret.confirm) {
						uni.navigateTo({
							url: "/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 充值
	const bindRecharge = () => {
		if (userData.value) {
			uni.navigateTo({
				url: "/pages/recharge/recharge"
			})
		} else {
			uni.showModal({
				title: "提示",
				content: "需要登录",
				success: (ret) => {
					if (ret.confirm) {
						uni.navigateTo({
							url: "/pages/loginForCode/loginForCode"
						})
					}
				}
			})
		}
	}
	// 公告列表
	const bindPlatformNews = () => {
		uni.navigateTo({
			url: "/pages/platformNews/platformNews"
		})
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F7F9;
	}

	::-webkit-scrollbar {
		display: none;
	}

	.fixed-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		height: 100rpx;
		background: #4744FF;
	}

	.nitoce {
		display: flex;
		align-items: center;
		margin: 38rpx 40rpx;

		>view {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 138rpx;
			height: 69rpx;
			background: #EDEEF1;
			border-radius: 58rpx;
			margin-right: 0;

			image {
				display: block;
				width: 38rpx;
				height: 38rpx;
				margin-right: 8rpx;
			}

			text {
				color: #313646;
				font-size: 28rpx;

			}
		}

		.bottom {
			flex: 2;

			.uni-noticebar {
				margin-bottom: 0;
				// padding: 0;
			}
		}

		>text {
			color: #313646;
			font-size: 28rpx;
			display: block;
			flex: 2;
		}
	}

	.hot-product-list {
		margin: 0 40rpx 52rpx;



		.produce {
			width: 613rpx;
			height: 384rpx;
			background: #FFFFFF;
			position: relative;
			border-radius: 23rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			box-shadow: 0px 15rpx 38rpx 0px rgba(0, 0, 0, 0.06);
			display: flex;
			align-items: center;

			.product-bg {
				position: absolute !important;
				width: 673rpx;
				height: 444rpx;
				left: 0;
				top: 0;
			}

			.pc {
				width: 100%;
				position: relative;
			}

			.right {
				display: flex;
				justify-content: space-between;
			}

			.product-header {
				display: flex;
				align-items: center;

				margin-bottom: 20rpx;

				>image {
					display: block;
					width: 38rpx;
					height: 38rpx;
					margin-right: 12rpx;
				}
			}

			.product-title {
				display: block;
				color: #313646;
				font-weight: bold;
				font-size: 31rpx;


			}

			.note {
				width: 231rpx;
				display: block;
				height: 42rpx;
				background: #FEF6E9;
				border-radius: 8rpx;
				color: #FF984D;
				font-size: 24rpx;
				line-height: 42rpx;



			}

			.tips {
				display: flex;
				align-items: center;

				// margin-top: 24rpx;

				text {
					color: #989AA2;
					font-size: 23rpx;
				}

				.line {
					display: block;
					width: 2rpx;
					height: 28rpx;
					background: #989AA2;
					margin: 0 20rpx;
				}
			}

			.footer {

				width: 100%;
				overflow-y: scroll;
				display: flex;
				margin-top: 20rpx;

				.fitem {
					margin-right: 15px;
					// width: 298rpx;
					padding: 0 20rpx;
					height: 267rpx;
					min-width: 320rpx;
					min-height: 267rpx;
					background: #FFFFFF;
					border-radius: 23rpx;
					border: 2rpx solid #EBF0F4;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.f1 {
					display: flex;
					align-items: center;

					margin-top: 30rpx;

					.ft {
						color: #313646;
						font-size: 28rpx;
						font-weight: bold;
					}

					.status {
						display: block;
						margin-left: 10rpx;
						width: 81rpx;
						height: 35rpx;
						background: #EAECF3;
						border-radius: 8rpx;
						line-height: 35rpx;
						text-align: center;
						color: #989AA2;
						font-size: 20rpx;
					}

					.act {
						background: #FFECEB;
						color: #FF2F22;
					}
				}

				.f2 {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					margin-bottom: 20rpx;

					.f3 {
						.price {

							.amount {
								color: #FF2F22;
								font-size: 40rpx;
								font-weight: bold;
							}

							.unit {
								color: #FF2F22;
								font-size: 28rpx;
							}
						}
					}

					button {
						width: 131rpx;
						min-width: 131rpx;
						height: 65rpx;
						background: rgba(67, 120, 255, 0.2);
						border-radius: 42rpx;
						color: #316BFF;
						font-size: 23rpx;
						font-weight: bold;
						padding: 0;
						margin: 0;
						border: none;
						line-height: 65rpx;

					}
				}




				.day {
					color: #989AA2;
					font-size: 23rpx;
					display: block;

				}

			}
		}

	}

	.produce-list {
		margin: 0 40rpx 38rpx;
		
		
.produce {
			width: 613rpx;
			height: 384rpx;
			background: #FFFFFF;
			position: relative;
			border-radius: 23rpx;
			margin-bottom: 30rpx;
			padding: 30rpx;
			box-shadow: 0px 15rpx 38rpx 0px rgba(0, 0, 0, 0.06);
			display: flex;
			align-items: center;

			.product-bg {
				position: absolute !important;
				width: 673rpx;
				height: 444rpx;
				left: 0;
				top: 0;
			}

			.pc {
				width: 100%;
				position: relative;
			}

			.right {
				display: flex;
				justify-content: space-between;
			}

			.product-header {
				display: flex;
				align-items: center;

				margin-bottom: 20rpx;

				>image {
					display: block;
					width: 38rpx;
					height: 38rpx;
					margin-right: 12rpx;
				}
			}

			.product-title {
				display: block;
				color: #313646;
				font-weight: bold;
				font-size: 31rpx;


			}

			.note {
				width: 231rpx;
				display: block;
				height: 42rpx;
				background: #FEF6E9;
				border-radius: 8rpx;
				color: #FF984D;
				font-size: 24rpx;
				line-height: 42rpx;



			}

			.tips {
				display: flex;
				align-items: center;

				

				text {
					color: #989AA2;
					font-size: 23rpx;
				}

				.line {
					display: block;
					width: 2rpx;
					height: 28rpx;
					background: #989AA2;
					margin: 0 20rpx;
				}
			}

			.footer {

				width: 100%;
				overflow-y: scroll;
				display: flex;
				margin-top: 20rpx;

				.fitem {
					margin-right: 15px;
					// width: 298rpx;
					padding: 0 20rpx;
					height: 267rpx;
					min-width: 320rpx;
					min-height: 267rpx;
					background: #FFFFFF;
					border-radius: 23rpx;
					border: 2rpx solid #EBF0F4;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.f1 {
					display: flex;
					align-items: center;

					margin-top: 30rpx;

					.ft {
						color: #313646;
						font-size: 28rpx;
						font-weight: bold;
					}

					.status {
						display: block;
						margin-left: 10rpx;
						width: 81rpx;
						height: 35rpx;
						background: #EAECF3;
						border-radius: 8rpx;
						line-height: 35rpx;
						text-align: center;
						color: #989AA2;
						font-size: 20rpx;
					}

					.act {
						background: #FFECEB;
						color: #FF2F22;
					}
				}

				.f2 {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					margin-bottom: 20rpx;

					.f3 {
						.price {

							.amount {
								color: #FF2F22;
								font-size: 40rpx;
								font-weight: bold;
							}

							.unit {
								color: #FF2F22;
								font-size: 28rpx;
							}
						}
					}

					button {
						width: 131rpx;
						min-width: 131rpx;
						height: 65rpx;
						background: rgba(67, 120, 255, 0.2);
						border-radius: 42rpx;
						color: #316BFF;
						font-size: 23rpx;
						font-weight: bold;
						padding: 0;
						margin: 0;
						border: none;
						line-height: 65rpx;

					}
				}




				.day {
					color: #989AA2;
					font-size: 23rpx;
					display: block;

				}

			}
		}

	
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 40rpx 30rpx;

		text {
			color: #313646;
			font-size: 27rpx;
			font-weight: bold;
		}

		image {
			display: block;
			width: 23rpx;
			height: 23rpx;
		}
	}

	.wrap {
		min-height: 100vh;
		background: #F6F7F9;


	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		position: relative;
		margin-top: -8rpx;
		margin-bottom: 48rpx;

		.tab {
			width: 317rpx;
			height: 144rpx;
			background: #FFFFFF;
			box-shadow: 0px 15 38rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				display: block;
				width: 60rpx;
				height: 60rpx;
				margin-right: 18rpx;
			}

			text {
				color: #313646;
				font-size: 27rpx;
			}
		}
	}

	.header {
		position: relative;
		padding-top: 70rpx;

		.bg {
			width: 100%;
			height: 690rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.header-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			padding: 0 40rpx;
			margin-top: 48rpx;

			text {
				color: #fff;
				font-size: 38rpx;
			}

			.service-box {
				width: 69rpx;
				height: 69rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 23rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					display: block;
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.header-content {
			width: 597rpx;
			height: 190rpx;
			// background: linear-gradient(120deg, #C9DBFF 0%, #FFFFFF 100%);
			box-shadow: 0px 15rpx 38rpx 0px rgba(0, 0, 0, 0.12);
			border-radius: 23rpx;
			position: relative;
			margin: 48rpx auto;
			padding: 38rpx 38rpx 32rpx;
			background: #fff;

			.product-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 673rpx;
				// z-index: 9;

			}

			.newIndex {
				position: absolute;
				top: 0;
				left: 0;
				width: 673rpx;
				height: 250rpx;
			}

			.card-line {
				position: absolute;
				top: 0;
				right: 0;
				width: 458rpx;
				height: 135rpx;
			}

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				text {
					color: #313646;
					font-size: 23rpx;
				}

				view {
					display: flex;
					align-items: center;

					image {
						display: block;
						width: 23rpx;
						height: 23rpx;
					}
				}
			}

			.price {
				display: flex;
				align-items: flex-end;
				margin-top: 20rpx;
				vertical-align: bottom;
				line-height: 1;
				position: relative;

				.amount {
					color: #313646;
					font-size: 58rpx;
					font-weight: bold;
					line-height: 1;
					vertical-align: bottom;
				}

				.unit {
					color: #313646;
					font-size: 27rpx;
					// line-height: 32rpx;
					display: block;
					margin: 0 15rpx 0 12rpx;
					vertical-align: bottom;
				}

				image {
					display: block;
					width: 27rpx;
					height: 27rpx;
					vertical-align: bottom;
				}
			}

			.summary {
				position: relative;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				justify-content: space-between;

				view {
					display: flex;
					align-items: center;
				}

				.label {
					color: #9EA0A8;
					display: block;
					margin-right: 20rpx;
				}

				.value {
					color: #313646;
					font-weight: bold;
				}
			}
		}
	}
</style>